
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-daoru"></i>
                    <div class="name">导入</div>
                    <div class="fontclass">.icon-daoru</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bofang"></i>
                    <div class="name">播放</div>
                    <div class="fontclass">.icon-bofang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuanfa"></i>
                    <div class="name">转发</div>
                    <div class="fontclass">.icon-zhuanfa</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-erji"></i>
                    <div class="name">耳机</div>
                    <div class="fontclass">.icon-erji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhanghaofenpei"></i>
                    <div class="name">账号分配</div>
                    <div class="fontclass">.icon-zhanghaofenpei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chanpin"></i>
                    <div class="name">产品</div>
                    <div class="fontclass">.icon-chanpin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fanhui"></i>
                    <div class="name">返回</div>
                    <div class="fontclass">.icon-fanhui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-share"></i>
                    <div class="name">share</div>
                    <div class="fontclass">.icon-share</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-check"></i>
                    <div class="name">check</div>
                    <div class="fontclass">.icon-check</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-close"></i>
                    <div class="name">close</div>
                    <div class="fontclass">.icon-close</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-edit"></i>
                    <div class="name">edit</div>
                    <div class="fontclass">.icon-edit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-emoji"></i>
                    <div class="name">emoji</div>
                    <div class="fontclass">.icon-emoji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-favorfill"></i>
                    <div class="name">favor_fill</div>
                    <div class="fontclass">.icon-favorfill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-favor"></i>
                    <div class="name">favor</div>
                    <div class="fontclass">.icon-favor</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-locationfill"></i>
                    <div class="name">location_fill</div>
                    <div class="fontclass">.icon-locationfill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-phone"></i>
                    <div class="name">phone</div>
                    <div class="fontclass">.icon-phone</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-roundcheckfill"></i>
                    <div class="name">round_check_fill</div>
                    <div class="fontclass">.icon-roundcheckfill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-roundcheck"></i>
                    <div class="name">round_check</div>
                    <div class="fontclass">.icon-roundcheck</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-roundclosefill"></i>
                    <div class="name">round_close_fill</div>
                    <div class="fontclass">.icon-roundclosefill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-roundclose"></i>
                    <div class="name">round_close</div>
                    <div class="fontclass">.icon-roundclose</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-roundrightfill"></i>
                    <div class="name">round_right_fill</div>
                    <div class="fontclass">.icon-roundrightfill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-roundright"></i>
                    <div class="name">round_right</div>
                    <div class="fontclass">.icon-roundright</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-search"></i>
                    <div class="name">search</div>
                    <div class="fontclass">.icon-search</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-timefill"></i>
                    <div class="name">time_fill</div>
                    <div class="fontclass">.icon-timefill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-time"></i>
                    <div class="name">time</div>
                    <div class="fontclass">.icon-time</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-unfold"></i>
                    <div class="name">unfold</div>
                    <div class="fontclass">.icon-unfold</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-commentfill"></i>
                    <div class="name">comment_fill</div>
                    <div class="fontclass">.icon-commentfill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-comment"></i>
                    <div class="name">comment</div>
                    <div class="fontclass">.icon-comment</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-likefill"></i>
                    <div class="name">like_fill</div>
                    <div class="fontclass">.icon-likefill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-like"></i>
                    <div class="name">like</div>
                    <div class="fontclass">.icon-like</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-notificationfill"></i>
                    <div class="name">notification_fill</div>
                    <div class="fontclass">.icon-notificationfill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-notification"></i>
                    <div class="name">notification</div>
                    <div class="fontclass">.icon-notification</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-back"></i>
                    <div class="name">back</div>
                    <div class="fontclass">.icon-back</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-list"></i>
                    <div class="name">list</div>
                    <div class="fontclass">.icon-list</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-myfill"></i>
                    <div class="name">my_fill</div>
                    <div class="fontclass">.icon-myfill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-my"></i>
                    <div class="name">my</div>
                    <div class="fontclass">.icon-my</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-settings"></i>
                    <div class="name">settings</div>
                    <div class="fontclass">.icon-settings</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-questionfill"></i>
                    <div class="name">question_fill</div>
                    <div class="fontclass">.icon-questionfill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-question"></i>
                    <div class="name">question</div>
                    <div class="fontclass">.icon-question</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-form"></i>
                    <div class="name">form</div>
                    <div class="fontclass">.icon-form</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pic"></i>
                    <div class="name">pic</div>
                    <div class="fontclass">.icon-pic</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-right"></i>
                    <div class="name">right</div>
                    <div class="fontclass">.icon-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-remind"></i>
                    <div class="name">remind</div>
                    <div class="fontclass">.icon-remind</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-delete"></i>
                    <div class="name">delete</div>
                    <div class="fontclass">.icon-delete</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-home"></i>
                    <div class="name">home</div>
                    <div class="fontclass">.icon-home</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lock"></i>
                    <div class="name">lock</div>
                    <div class="fontclass">.icon-lock</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-unlock"></i>
                    <div class="name">unlock</div>
                    <div class="fontclass">.icon-unlock</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-friendadd"></i>
                    <div class="name">friend_add</div>
                    <div class="fontclass">.icon-friendadd</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-friendfamous"></i>
                    <div class="name">friend_famous</div>
                    <div class="fontclass">.icon-friendfamous</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-friend"></i>
                    <div class="name">friend</div>
                    <div class="fontclass">.icon-friend</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jingyin"></i>
                    <div class="name">静音</div>
                    <div class="fontclass">.icon-jingyin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-squarecheckfill"></i>
                    <div class="name">square_check_fill</div>
                    <div class="fontclass">.icon-squarecheckfill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-square"></i>
                    <div class="name">square</div>
                    <div class="fontclass">.icon-square</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-squarecheck"></i>
                    <div class="name">square_check</div>
                    <div class="fontclass">.icon-squarecheck</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-round"></i>
                    <div class="name">round</div>
                    <div class="fontclass">.icon-round</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-roundaddfill"></i>
                    <div class="name">round_add_fill</div>
                    <div class="fontclass">.icon-roundaddfill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-roundadd"></i>
                    <div class="name">round_add</div>
                    <div class="fontclass">.icon-roundadd</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daochu"></i>
                    <div class="name">导出</div>
                    <div class="fontclass">.icon-daochu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fold"></i>
                    <div class="name">fold</div>
                    <div class="fontclass">.icon-fold</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiedanshouli"></i>
                    <div class="name">接单受理</div>
                    <div class="fontclass">.icon-jiedanshouli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhuatong"></i>
                    <div class="name">电话筒</div>
                    <div class="fontclass">.icon-dianhuatong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-infofill"></i>
                    <div class="name">info_fill</div>
                    <div class="fontclass">.icon-infofill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-info"></i>
                    <div class="name">info</div>
                    <div class="fontclass">.icon-info</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duanxin"></i>
                    <div class="name">短信</div>
                    <div class="fontclass">.icon-duanxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daochu1"></i>
                    <div class="name">导出</div>
                    <div class="fontclass">.icon-daochu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sort"></i>
                    <div class="name">sort</div>
                    <div class="fontclass">.icon-sort</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontbiaoji"></i>
                    <div class="name">标记</div>
                    <div class="fontclass">.icon-iconfontbiaoji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontbiaoji2"></i>
                    <div class="name">标记</div>
                    <div class="fontclass">.icon-iconfontbiaoji2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wancheng"></i>
                    <div class="name">完成</div>
                    <div class="fontclass">.icon-wancheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shu"></i>
                    <div class="name">书</div>
                    <div class="fontclass">.icon-shu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youjian"></i>
                    <div class="name">邮件</div>
                    <div class="fontclass">.icon-youjian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixin"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-weixin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-upstagefill"></i>
                    <div class="name">upstage_fill</div>
                    <div class="fontclass">.icon-upstagefill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-upstage"></i>
                    <div class="name">upstage</div>
                    <div class="fontclass">.icon-upstage</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-creativefill"></i>
                    <div class="name">creative_fill</div>
                    <div class="fontclass">.icon-creativefill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-creative"></i>
                    <div class="name">creative</div>
                    <div class="fontclass">.icon-creative</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qunzuqueren"></i>
                    <div class="name">群组 确认</div>
                    <div class="fontclass">.icon-qunzuqueren</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhifumingxixuanzhong"></i>
                    <div class="name">支付明细_选中</div>
                    <div class="fontclass">.icon-zhifumingxixuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wodebumen"></i>
                    <div class="name">我的部门</div>
                    <div class="fontclass">.icon-wodebumen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon114"></i>
                    <div class="name">综合分析</div>
                    <div class="fontclass">.icon-icon114</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti1"></i>
                    <div class="name">分析</div>
                    <div class="fontclass">.icon-weibiaoti1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daochushuju"></i>
                    <div class="name">导出数据</div>
                    <div class="fontclass">.icon-daochushuju</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfont37newtag"></i>
                    <div class="name">今日上新</div>
                    <div class="fontclass">.icon-iconfont37newtag</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fire"></i>
                    <div class="name">火</div>
                    <div class="fontclass">.icon-fire</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-monitor"></i>
                    <div class="name">监控</div>
                    <div class="fontclass">.icon-monitor</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingdan"></i>
                    <div class="name">订单</div>
                    <div class="fontclass">.icon-dingdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kehu"></i>
                    <div class="name">客户</div>
                    <div class="fontclass">.icon-kehu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bangongxitong"></i>
                    <div class="name">办公系统</div>
                    <div class="fontclass">.icon-bangongxitong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-markfill"></i>
                    <div class="name">mark_fill</div>
                    <div class="fontclass">.icon-markfill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mark"></i>
                    <div class="name">mark</div>
                    <div class="fontclass">.icon-mark</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhua"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-dianhua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhuajianpan"></i>
                    <div class="name">电话键盘</div>
                    <div class="fontclass">.icon-dianhuajianpan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huchudianhua"></i>
                    <div class="name">呼出电话</div>
                    <div class="fontclass">.icon-huchudianhua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hujiaozhuanyi"></i>
                    <div class="name">呼叫转移</div>
                    <div class="fontclass">.icon-hujiaozhuanyi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhuatianchong"></i>
                    <div class="name">电话_填充</div>
                    <div class="fontclass">.icon-dianhuatianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhuajianpantianchong"></i>
                    <div class="name">电话键盘_填充</div>
                    <div class="fontclass">.icon-dianhuajianpantianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-faxiantianchong"></i>
                    <div class="name">发现_填充</div>
                    <div class="fontclass">.icon-faxiantianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huchudianhuatianchong"></i>
                    <div class="name">呼出电话_填充</div>
                    <div class="fontclass">.icon-huchudianhuatianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hujiaozhuanyitianchong"></i>
                    <div class="name">呼叫转移_填充</div>
                    <div class="fontclass">.icon-hujiaozhuanyitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dizhixiugai"></i>
                    <div class="name">地址修改</div>
                    <div class="fontclass">.icon-dizhixiugai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bofang1"></i>
                    <div class="name">播放</div>
                    <div class="fontclass">.icon-bofang1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhua1"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-dianhua1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangshang"></i>
                    <div class="name">向上</div>
                    <div class="fontclass">.icon-xiangshang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangxia"></i>
                    <div class="name">向下</div>
                    <div class="fontclass">.icon-xiangxia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yonghu"></i>
                    <div class="name">用户</div>
                    <div class="fontclass">.icon-yonghu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shijian"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-shijian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zanting"></i>
                    <div class="name">暂停</div>
                    <div class="fontclass">.icon-zanting</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-web"></i>
                    <div class="name">web</div>
                    <div class="fontclass">.icon-web</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangyou"></i>
                    <div class="name">向右</div>
                    <div class="fontclass">.icon-xiangyou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-phone1"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-phone1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sczhuanfa"></i>
                    <div class="name">sc_转发</div>
                    <div class="fontclass">.icon-sczhuanfa</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongxunlu"></i>
                    <div class="name">通讯录</div>
                    <div class="fontclass">.icon-tongxunlu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-attentionfill"></i>
                    <div class="name">attention_fill</div>
                    <div class="fontclass">.icon-attentionfill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-attention"></i>
                    <div class="name">attention</div>
                    <div class="fontclass">.icon-attention</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangguan"></i>
                    <div class="name">相关</div>
                    <div class="fontclass">.icon-xiangguan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-entrust"></i>
                    <div class="name">委托管理</div>
                    <div class="fontclass">.icon-entrust</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kefu"></i>
                    <div class="name">客服</div>
                    <div class="fontclass">.icon-kefu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cut"></i>
                    <div class="name">cut</div>
                    <div class="fontclass">.icon-cut</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zanting1"></i>
                    <div class="name">暂停</div>
                    <div class="fontclass">.icon-zanting1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuichu"></i>
                    <div class="name">退出</div>
                    <div class="fontclass">.icon-tuichu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hungup"></i>
                    <div class="name">挂断</div>
                    <div class="fontclass">.icon-hungup</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhongzhi"></i>
                    <div class="name">重置</div>
                    <div class="fontclass">.icon-zhongzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-group"></i>
                    <div class="name">group</div>
                    <div class="fontclass">.icon-group</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shijian1"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-shijian1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daoru1"></i>
                    <div class="name">导入</div>
                    <div class="fontclass">.icon-daoru1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenjian1"></i>
                    <div class="name">文件</div>
                    <div class="fontclass">.icon-wenjian1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-add"></i>
                    <div class="name">add</div>
                    <div class="fontclass">.icon-add</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-move"></i>
                    <div class="name">move</div>
                    <div class="fontclass">.icon-move</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chadingdan"></i>
                    <div class="name">查订单</div>
                    <div class="fontclass">.icon-chadingdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhua01"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-dianhua01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangchuan"></i>
                    <div class="name">上传</div>
                    <div class="fontclass">.icon-shangchuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenjian"></i>
                    <div class="name">文件</div>
                    <div class="fontclass">.icon-wenjian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pingjia"></i>
                    <div class="name">评价</div>
                    <div class="fontclass">.icon-pingjia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ananzuiconv264"></i>
                    <div class="name">收支明细</div>
                    <div class="fontclass">.icon-ananzuiconv264</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yanjing"></i>
                    <div class="name">眼睛</div>
                    <div class="fontclass">.icon-yanjing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youxiang"></i>
                    <div class="name">邮箱</div>
                    <div class="fontclass">.icon-youxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cheliangguanli"></i>
                    <div class="name">车辆管理</div>
                    <div class="fontclass">.icon-cheliangguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiankong"></i>
                    <div class="name">监控</div>
                    <div class="fontclass">.icon-jiankong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zszhishi"></i>
                    <div class="name">zs知识</div>
                    <div class="fontclass">.icon-zszhishi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cheliangguanli1"></i>
                    <div class="name">车辆管理</div>
                    <div class="fontclass">.icon-cheliangguanli1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chat"></i>
                    <div class="name">chat</div>
                    <div class="fontclass">.icon-chat</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-apyapp"></i>
                    <div class="name">apy-app</div>
                    <div class="fontclass">.icon-apyapp</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixin1"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-weixin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bangzhu"></i>
                    <div class="name">帮助</div>
                    <div class="fontclass">.icon-bangzhu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-link"></i>
                    <div class="name">链接</div>
                    <div class="fontclass">.icon-link</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-u-ico-structure"></i>
                    <div class="name">eHR-组织结构</div>
                    <div class="fontclass">.icon-u-ico-structure</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cheliangguanli2"></i>
                    <div class="name">车辆管理</div>
                    <div class="fontclass">.icon-cheliangguanli2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tixing"></i>
                    <div class="name">提醒</div>
                    <div class="fontclass">.icon-tixing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gengduo"></i>
                    <div class="name">更多</div>
                    <div class="fontclass">.icon-gengduo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-copy"></i>
                    <div class="name">copy</div>
                    <div class="fontclass">.icon-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cheliangjiankong"></i>
                    <div class="name">车辆监控</div>
                    <div class="fontclass">.icon-cheliangjiankong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bijiaolei"></i>
                    <div class="name">比较类</div>
                    <div class="fontclass">.icon-bijiaolei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-querenzhanghuxinxi"></i>
                    <div class="name">确认账户信息</div>
                    <div class="fontclass">.icon-querenzhanghuxinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shijian2"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-shijian2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-erji1"></i>
                    <div class="name">耳机</div>
                    <div class="fontclass">.icon-erji1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yiwancheng"></i>
                    <div class="name">已完成</div>
                    <div class="fontclass">.icon-yiwancheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconjiaofeimingxi"></i>
                    <div class="name">icon - 缴费明细</div>
                    <div class="fontclass">.icon-iconjiaofeimingxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tingzhiquanceasefill"></i>
                    <div class="name">停止（圈） cease_fill</div>
                    <div class="fontclass">.icon-tingzhiquanceasefill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfonttupian"></i>
                    <div class="name">图片</div>
                    <div class="fontclass">.icon-iconfonttupian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhua2"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-dianhua2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhengque"></i>
                    <div class="name">正确</div>
                    <div class="fontclass">.icon-zhengque</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baocun-copy"></i>
                    <div class="name">保存</div>
                    <div class="fontclass">.icon-baocun-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-piliangyewu"></i>
                    <div class="name">01批量业务</div>
                    <div class="fontclass">.icon-piliangyewu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shalou"></i>
                    <div class="name">沙漏</div>
                    <div class="fontclass">.icon-shalou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenpei"></i>
                    <div class="name">分配</div>
                    <div class="fontclass">.icon-fenpei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xingweifenxi"></i>
                    <div class="name">行为分析</div>
                    <div class="fontclass">.icon-xingweifenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kefuzhongxin"></i>
                    <div class="name">客服中心</div>
                    <div class="fontclass">.icon-kefuzhongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gerenzhuli"></i>
                    <div class="name">个人助理</div>
                    <div class="fontclass">.icon-gerenzhuli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yichuliweixuanzhong"></i>
                    <div class="name">已处理(未选中)</div>
                    <div class="fontclass">.icon-yichuliweixuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yichulixuanzhong"></i>
                    <div class="name">已处理(选中)</div>
                    <div class="fontclass">.icon-yichulixuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cunrucaogaoxiang"></i>
                    <div class="name">存入草稿箱</div>
                    <div class="fontclass">.icon-cunrucaogaoxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paixinghui"></i>
                    <div class="name">排行 灰</div>
                    <div class="fontclass">.icon-paixinghui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuyin"></i>
                    <div class="name">语音</div>
                    <div class="fontclass">.icon-yuyin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huihua"></i>
                    <div class="name">会话</div>
                    <div class="fontclass">.icon-huihua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixin-copy"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-weixin-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongxunlu1"></i>
                    <div class="name">通讯录</div>
                    <div class="fontclass">.icon-tongxunlu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangyou1"></i>
                    <div class="name">向右</div>
                    <div class="fontclass">.icon-xiangyou1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangzuo"></i>
                    <div class="name">向左</div>
                    <div class="fontclass">.icon-xiangzuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-recycle"></i>
                    <div class="name">回收站</div>
                    <div class="fontclass">.icon-recycle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shiyongjilu"></i>
                    <div class="name">使用记录</div>
                    <div class="fontclass">.icon-shiyongjilu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongdan"></i>
                    <div class="name">工单</div>
                    <div class="fontclass">.icon-gongdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-biaoqing"></i>
                    <div class="name">表情</div>
                    <div class="fontclass">.icon-biaoqing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-shouye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liucheng"></i>
                    <div class="name">流程</div>
                    <div class="fontclass">.icon-liucheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontconnectionbars"></i>
                    <div class="name">信号</div>
                    <div class="fontclass">.icon-iconfontconnectionbars</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-o11"></i>
                    <div class="name">返回</div>
                    <div class="fontclass">.icon-o11</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-19"></i>
                    <div class="name">云</div>
                    <div class="fontclass">.icon-19</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huihua1"></i>
                    <div class="name">会话</div>
                    <div class="fontclass">.icon-huihua1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanyuwomen01"></i>
                    <div class="name">关于我们</div>
                    <div class="fontclass">.icon-guanyuwomen01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jia"></i>
                    <div class="name">加</div>
                    <div class="fontclass">.icon-jia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cheliangguanli3"></i>
                    <div class="name">车辆管理</div>
                    <div class="fontclass">.icon-cheliangguanli3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shibai"></i>
                    <div class="name">失败</div>
                    <div class="fontclass">.icon-shibai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cheliangguanli4"></i>
                    <div class="name">车辆管理</div>
                    <div class="fontclass">.icon-cheliangguanli4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-1"></i>
                    <div class="name">随机箭头</div>
                    <div class="fontclass">.icon-1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-roundaddlight"></i>
                    <div class="name">round_add_light</div>
                    <div class="fontclass">.icon-roundaddlight</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiazai"></i>
                    <div class="name">加载</div>
                    <div class="fontclass">.icon-jiazai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-screening"></i>
                    <div class="name">筛选</div>
                    <div class="fontclass">.icon-screening</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tipyiwen"></i>
                    <div class="name">tip-疑问</div>
                    <div class="fontclass">.icon-tipyiwen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tanhao"></i>
                    <div class="name">叹号</div>
                    <div class="fontclass">.icon-tanhao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongji01"></i>
                    <div class="name">统计-01</div>
                    <div class="fontclass">.icon-tongji01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cheliangjiankong1"></i>
                    <div class="name">车辆监控</div>
                    <div class="fontclass">.icon-cheliangjiankong1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kuqucheliangjiankong01"></i>
                    <div class="name">智慧粮库－库区车辆监控-01</div>
                    <div class="fontclass">.icon-kuqucheliangjiankong01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongdan1"></i>
                    <div class="name">工单</div>
                    <div class="fontclass">.icon-gongdan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuijia1"></i>
                    <div class="name">追加1</div>
                    <div class="fontclass">.icon-zhuijia1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-3"></i>
                    <div class="name">加载中</div>
                    <div class="fontclass">.icon-3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanlicheliang"></i>
                    <div class="name">管理车辆</div>
                    <div class="fontclass">.icon-guanlicheliang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongxin"></i>
                    <div class="name">通信</div>
                    <div class="fontclass">.icon-tongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiazai1"></i>
                    <div class="name">加载</div>
                    <div class="fontclass">.icon-jiazai1</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
